<template>
    <Menu ref="SideBar" theme="dark" width="auto" height="" @on-open-change="ChangeMenuStatus" @on-select="ChangeMenu" :active-name="ActiveMenu" :open-names="OpenNames" :style="{borderRadius: '10px'}">
        <Submenu v-for="item in Menu.filter(item => item.checked || item.indeterminate)" :key="item.id" :name="item.name">
            <template slot="title">
                <Icon :type="item.icon" />
                {{ item.title }}
            </template>
            <MenuItem v-for="subItem in item.children.filter(item => item.checked || item.indeterminate)" :key="subItem.id" :name="subItem.name" :to="subItem.route">
                <Icon :type="subItem.icon" />
                {{ subItem.title }}
            </MenuItem>
        </Submenu>
    </Menu>
</template>
<script>
import { mapState } from "vuex";
import { getUserInfo } from '@/store/localStorage/cookies';
import { SetCurrentActiveMenu,GetCurrentActiveMenu,SetCurrentOpenMenu,GetCurrentOpenMenu } from '@/axios/api/MenuManagerAPI'

export default {
    name: 'sidebar',
    data() {
        return {
            isCollapsed: false,
            sidebarHeight: 710,
            CurrentUser: {},
            ActiveMenu: ''
        };
    },
    computed: {
        ...mapState('sidebar',[
            'Menu',
            'OpenNames'
        ]),
        menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    created: function(){
        var Finanical = [{
                        id: '1',
                        title: '资金管理',
                        name: 'FundsAccount',
                        icon: 'logo-yen',
                        expand: true,
                        indeterminate: false,
                        checked: true,
                        children: [{
                            id: '1-1',
                            name: 'Bank',
                            title: '银行维护',
                            icon: 'logo-yen',
                            route: '/funds/Bank',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                            //children:[]
                        },{
                            id: '1-2',
                            name: 'Project',
                            title: '项目维护',
                            icon: 'md-hammer',
                            route: '/funds/Project',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        },{
                            id: '1-4',
                            name: 'CashFlow',
                            title: '流水录入',
                            icon: 'md-bookmarks',
                            route: '/funds/CashFlow',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        }]
                    },{
                        id: '3',
                        title: '冻结管理',
                        name: 'Freeze',
                        icon: 'ios-snow',
                        expand: true,
                        indeterminate: false,
                        checked: true,
                        children: [{
                            id: '3-1',
                            name: 'FreezeMoney',
                            title: '冻结管理',
                            icon: 'ios-snow',
                            route: '/freeze/FreezeMoney',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                            //children:[]
                        },{
                            id: '3-2',
                            name: 'CreditContract',
                            title: '借条管理',
                            icon: 'ios-copy',
                            route: '/freeze/CreditContract',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                            //children:[]
                        },{
                            id: '3-3',
                            name: 'UnFreezeMoney',
                            title: '解冻管理',
                            icon: 'ios-sunny',
                            route: '/freeze/UnFreezeMoney',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                            //children:[]
                        }]
                    },{
                        id: '4',
                        title: '税务管理',
                        name: 'TaxManage',
                        icon: 'ios-water',
                        expand: false,
                        indeterminate: false,
                        checked: true,
                        children: [{
                            id: '4-0',
                            title: '发票认证',
                            name: 'VATAuthentication',
                            icon: 'ios-ribbon',
                            route: '/tax/VATAuthentication',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        },{
                            id: '4-1',
                            title: '专用发票',
                            name: 'VATSpecialInvoice',
                            icon: 'ios-paper',
                            route: '/tax/VATSpecialInvoice',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        },{
                            id: '4-2',
                            title: '普通发票',
                            name: 'VATGeneralInvoice',
                            icon: 'ios-paper-outline',
                            route: '/tax/VATGeneralInvoice',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        },{
                            id: '4-3',
                            title: '电子发票',
                            name: 'VATElectronicInvoice',
                            icon: 'ios-mail',
                            route: '/tax/VATElectronicInvoice',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        }]
                    },{
                        id: '2',
                        title: '统计报表',
                        name: 'StaticReport',
                        icon: 'ios-analytics',
                        expand: false,
                        indeterminate: false,
                        checked: true,
                        children: [{
                            id: '2-1',
                            title: '资金报表',
                            name: 'FundsReport',
                            icon: 'ios-stats',
                            route: '/report/funds',
                            expand: true,
                            indeterminate: false,
                            checked: true,
                        }]
                    }]
        this.$store.dispatch('sidebar/InitSideBar',{ Menu: Finanical,OpenNames: ['FundsAccount']})
        
    },
    mounted(){
        const height = this.isSummary ? window.innerHeight - 301 : window.innerHeight - 261;
        this.sidebarHeight = height;

        this.CurrentUser = JSON.parse(getUserInfo());
        GetCurrentActiveMenu({currentUser: this.CurrentUser.Id}).then(res => {
            this.ActiveMenu = res;
        });
        GetCurrentOpenMenu({currentUser: this.CurrentUser.Id}).then(res => {
            this.$store.dispatch('sidebar/ChangeOpenMenu',res);
        });
    },
    watch:{
        OpenNames(){
            this.$nextTick(function() {
                this.$refs.SideBar.updateOpened()
            });
        }
    },
    methods: {
        ChangeMenu(name){
            SetCurrentActiveMenu({ currentUser: this.CurrentUser.Id,ActiveMenu: name})
        },
        ChangeMenuStatus(name){
            SetCurrentOpenMenu({ currentUser: this.CurrentUser.Id,OpenMenu: JSON.stringify(name) });
        }
    }
}
</script>
<style scoped>
    th {
        text-align: center;
    }
    /*隐藏scrollbar */
    .hiddenscroll::-webkit-scrollbar { width: 0 !important }
    .hiddenscroll { -ms-overflow-style: none; }
    .hiddenscroll { overflow: -moz-scrollbars-none; }
</style>